<template>
  <div class="recommend-item"
       v-if="showCard" @click="handleDetail(newInfo.goods_id)">
    <div class="img-wrap"
         w-328-350
         aspectratio>
      <img v-lazy="newInfo.cover_image"
           alt=""
           aspectratio-content>
    </div>
    <div class="desc">{{newInfo.goods_name}}</div>
    <div class="price">
      <p class="discounts_price"><span>￥</span>{{newInfo.goods_price}}</p>
      <p class="origin_price"><span>￥</span>{{newInfo.line_price}}</p>
    </div>
  </div>
</template>
<script>
import { ellipsis } from '@/assets/js/util'
export default {
  name: 'CommonCard',
  props: {
    info: {
      type: Object
    }
  },
  computed: {
    showCard () {
      return Object.keys(this.info).length
    },
    newInfo () {
      return Object.assign({}, this.info, { goods_name: ellipsis(this.info.goods_name, 22) })
    }
  },
  methods: {
    handleDetail (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.recommend-item
  width 100%
  height 100%

  .img-wrap
    background-color $recommend_bgc
    margin-bottom 20px

  .desc
    font-size $address
    font-weight 400
    color $icon_color
    line-height 42px
    height 84px
    position relative
    overflow hidden

  .price
    display flex

    .discounts_price
      font-size $shop_name
      font-weight 400
      color $tab_active
      line-height 54px
      margin-right 30px

      span
        margin-right 8px

    .origin_price
      font-size $common_fz
      font-weight 400
      color $original_price
      line-height 54px
      text-decoration line-through
</style>
